import { PureComponent } from 'react'
import { connect } from 'dva';
import { DatePicker, Select, Button, Table, Tooltip} from 'antd'
import styles from './dataLook.less'
const { RangePicker } = DatePicker;
const Option = Select.Option;
function getDay(day){
  var today = new Date();
  var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
  today.setTime(targetday_milliseconds); //注意，这行是关键代码
  var tYear = today.getFullYear();
  var tMonth = today.getMonth();
  var tDate = today.getDate();
  tMonth = doHandleMonth(tMonth + 1);
  tDate = doHandleMonth(tDate);
  return tYear+"-"+tMonth+"-"+tDate;
    
}
function doHandleMonth(month){
  var m = month;
  if(month.toString().length === 1){
   　m = "0" + month;
  }
  return m;
}
function getToday () {
  var d = new Date();
  let m = d.getMonth() + 1
  if(m >=10){
    m = d.getMonth() + 1
  }else{
    m = `0${d.getMonth() + 1}`
  }
  return d.getFullYear() + "-" + m + "-" + d.getDate();
}
let Now = getToday()
let SevPast = getDay(-7)
@connect(({ loading, example = {} }) => ({    //其中global={}表示global中的所有state
  commonList: example.commonList,   //读取原有的state，即models中的global.js文件中的weather
  userList: example.userList,
  totalCount: example.total,
  oderList: example.oderList,
  oderTotal: example.oderTotal,
  loading: loading.effects['example/getCommonListData'],   //这个statu使用models中的chart.js文件中的fetch方法异步获取
}))
export default class DataLook extends PureComponent {
  params = {
    startDate: SevPast,
    endDate: Now,
    currentOsType: '',
    countryId: '',
  }
  paramsSearch = {
    startDate: SevPast,
    endDate: Now,
    currentOsType: '',
    countryId: '',
    page: 1,
    pageSize: 10
  }
  paramsOder = {
    startDate: SevPast,
    endDate: Now,
    platform: '',
    countryId: '',
    page: 1,
    pageSize: 10
  }
  paramsOderExport = {
    startDate: SevPast,
    endDate: Now,
    platform: '',
    countryId: '',
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'example/getCommonListData',
      payload: {}
    })
    dispatch({
      type: 'example/getUserDataList',
      payload: this.paramsSearch
    })
    dispatch({
      type: 'example/getOderDataList',
      payload: this.paramsOder
    })
  }
  exprotUser = () => {
    const { startDate, endDate, currentOsType, countryId } = this.params
    window.location.href=`/DataCompassMgr/doExportDailyCustomerData?startDate=${startDate}&endDate=${endDate}&currentOsType=${currentOsType}&countryId=${countryId}`
  }
  changeTime = (value, dateString) => {
    this.params.startDate = dateString[0]
    this.params.endDate = dateString[1]
    this.paramsSearch.startDate = dateString[0]
    this.paramsSearch.endDate = dateString[1]
  }
  handleChangePhone = (data) => {
    this.params.currentOsType = data
    this.paramsSearch.currentOsType = data
  }
  handleChangeCon = (data) => {
    this.params.countryId = data
    this.paramsSearch.countryId = data
  }
  handleSearch = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'example/getUserDataList',
      payload: this.paramsSearch
    })
  }
  handleTableChange = (data) => {
    this.paramsSearch.page = data.current
    const { dispatch } = this.props
    dispatch({
      type: 'example/getUserDataList',
      payload: this.paramsSearch
    })
  }
  dateOder = (value,dateString) => {
    this.paramsOderExport.startDate = dateString[0]
    this.paramsOderExport.endDate = dateString[1]
    this.paramsOder.startDate = dateString[0]
    this.paramsOder.endDate = dateString[1]
  }
  handleOderPhone = (data) => {
    this.paramsOderExport.platform = data
    this.paramsOder.platform = data
  }
  handleOderCon = (data) => {
    this.paramsOderExport.countryId = data
    this.paramsOder.countryId = data
  }
  exportOder = () => {
    const { startDate, endDate, platform, countryId } = this.paramsOderExport
    window.location.href=`/DataCompassMgr/doExportDailyExpressData?startDate=${startDate}&endDate=${endDate}&platform=${platform}&countryId=${countryId}`
  }
  handleOderData = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'example/getOderDataList',
      payload: this.paramsOder
    })
  }
  handleChangeOder = (data) => {
    this.paramsOder.page = data.current
    const { dispatch } = this.props
    dispatch({
      type: 'example/getOderDataList',
      payload: this.paramsOder
    })
  }
  render() {
    const { userList, totalCount, oderList, oderTotal } = this.props
    const dataSource  = userList
    const dataSourceOder = oderList
    const paginationProps = {
      total: totalCount,
      defaultCurrent:1,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: 10,
      pageSizeOptions: ['10'],
    }
    const paginationOder = {
      total: oderTotal,
      defaultCurrent:1,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSize: 10,
      pageSizeOptions: ['10'],
    }
    const columns = [{
      title: '时间',
      dataIndex: 'date',
      key: 'date',
      align: 'center',
    }, {
      title: '注册用户数',
      dataIndex: 'registered',
      key:'registered' ,
      align: 'center',
    }, {
      title: '登录用户数',
      dataIndex: 'login',
      key: 'login',
      align: 'center',
    },{
      title: '下单用户数',
      dataIndex: 'orders',
      key: 'orders',
      align: 'center',
    },{
      title: '付款用户数',
      dataIndex: 'payers',
      key: 'payers',
      align: 'center',
    }];
    const columnsOder = [{
      title: '时间',
      dataIndex: 'date',
      key: '1',
      align: 'center',
    }, {
      title: '创建订单数',
      dataIndex: 'createExpress',
      key:'2' ,
      align: 'center',
    }, {
      title: '付款订单数',
      dataIndex: 'paidExpress',
      key: '3',
      align: 'center',
    },{
      title: '无信息单（未下单）',
      dataIndex: 'unbookNoinformation',
      key: '4',
      align: 'center',
    },{
      title: '广州已收运订单',
      dataIndex: 'receiveExpress',
      key: '5',
      align: 'center',
    },{
      title: '已完成订单',
      dataIndex: 'doneExpress',
      key: '6',
      align: 'center',
    },{
      title: 'GMV(CNY)',
      dataIndex: 'gmv',
      key: '7',
      align: 'center',
      render: (row) => {
        return (
          <Tooltip title={row} placement="topLeft">
            <span className={styles.spanStyle}>{row}</span>
          </Tooltip>
        )
      },
    }];
    const { commonList} = this.props
    const phoneList = commonList.platforms
    const countryList = commonList.countries
    return (
      <div className={styles.dataLook}>
        <div className={styles.oderData}>
          <h2>用户数据</h2>
          <div className={styles.dataLookSearch}>
            <div className={styles.searchSingle} style={{marginRight: '47px'}}>
              <span>时间：</span>
              <RangePicker style={{width: '280px'}} 
                format="YYYY-MM-DD"
                placeholder={['开始时间', '结束时间']}
                onChange={this.changeTime}
              />
            </div>
            <div className={styles.searchSingle}>
              <span>平台：</span>
              <Select  style={{ width: 280 }} allowClear={true} onChange={this.handleChangePhone}>
               { phoneList && phoneList.map(item => (
                  <Option key={item} value={item}>{item}</Option>
                ))}
              </Select>
            </div>
            <div className={styles.searchSingle} >
              <span>国家：</span>
              <Select style={{ width: 280 }} allowClear={true} onChange={this.handleChangeCon}>
                { countryList && countryList.map(item => (
                  <Option key={item.id} value={item.id}>{item.name}</Option>
                ))}
              </Select>
            </div>
          </div>
          <div className={styles.dataLookButton}>
            <Button type="primary" onClick={this.handleSearch}>查询</Button>
            <Button style={{marginLeft: '8px'}} onClick={this.exprotUser}>导出</Button>
          </div>
          <Table dataSource={dataSource} 
          columns={columns} style={{marginTop: '24px'}}
          pagination={paginationProps}
          onChange={this.handleTableChange}
          rowKey={(record, key) => key}
          />
        </div>
        <div className={styles.oderData} style={{marginTop: '20px'}}>
          <h2>订单数据</h2>
          <div className={styles.dataLookSearch}>
            <div className={styles.searchSingle}>
              <span>时间：</span>
              <RangePicker style={{width: '280px'}} onChange={this.dateOder}/>
            </div>
            <div className={styles.searchSingle}>
              <span>平台：</span>
              <Select  style={{ width: 280 }} allowClear={true} onChange={this.handleOderPhone}>
                { phoneList && phoneList.map(item => (
                  <Option key={item} value={item}>{item}</Option>
                ))}
              </Select>
            </div>
            <div className={styles.searchSingle}>
              <span>国家：</span>
              <Select style={{ width: 280 }} allowClear={true} onChange={this.handleOderCon}>
               { countryList && countryList.map(item => (
                  <Option key={item.id} value={item.id}>{item.name}</Option>
                ))}
              </Select>
            </div>
          </div>
          <div className={styles.dataLookButton}>
            <Button type="primary" onClick={this.handleOderData}>查询</Button>
            <Button style={{marginLeft: '8px'}} onClick={this.exportOder}>导出</Button>
          </div>
          <Table dataSource={dataSourceOder} columns={columnsOder} style={{marginTop: '24px'}} pagination={paginationOder} rowKey={(record, key) => key} onChange={this.handleChangeOder}/>
        </div>
      </div>
    )
  }
}
// export default connect()(DataLook);
